<template>
  <div class="question">
    <div class="TOP">
      <el-card>
        <el-form
          label-width="100px"
          :inline="true"
          :model="form"
          class="demo-form-inline"
        >
          <el-form-item label="学科">
            <el-select v-model="form.subject" placeholder="请选择">
              <el-option label="前端" :value="97"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="阶段">
            <el-select v-model="form.step" placeholder="请选择">
              <el-option label="初级" value="1"></el-option>
              <el-option label="中级" value="2"></el-option>
              <el-option label="高级" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业">
            <el-select v-model="form.enterprise" placeholder="请选择">
              <el-option label="阿里巴巴" :value="51"></el-option>
              <el-option label="黑马程序员" :value="50"></el-option>
              <el-option label="传智播客" :value="49"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option label="单选" :value="1"></el-option>
              <el-option label="多选" :value="2"></el-option>
              <el-option label="简答" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select
              v-model="form.difficulty"
              placeholder="请选择"
              size="100px"
            >
              <el-option label="简单" :value="1"></el-option>
              <el-option label="一般" :value="2"></el-option>
              <el-option label="困难" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="form.username" placeholder="请选择"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="禁用" :value="0"></el-option>
              <el-option label="启用" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间">
            <el-date-picker
              v-model="form.create_date"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="标题">
            <el-input style="width:522px" v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="seach">搜索</el-button>
            <el-button>清除</el-button>
            <el-button type="primary" @click="add">+新增试题</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="botton">
      <el-card>
        <el-table :data="questionList" style="width: 100%">
          <el-table-column prop="date" label="序号" width="180">
            <template v-slot="{ $index }">
              {{ (page.page - 1) * page.pageSize + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="题目" width="180">
          </el-table-column>
          <el-table-column prop="step" label="学科.阶段"> </el-table-column>
          <el-table-column prop="type" label="题型"> </el-table-column>
          <el-table-column prop="enterprise_name" label="企业">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="{ row }">
              <span :class="{ red: row.status == '禁用' }">{{
                row.status
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="reads" label="访问量"> </el-table-column>
          <el-table-column prop="address" label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button
                type="text"
                v-if="row.status === '禁用'"
                @click="qiyong(row)"
                >启用</el-button
              >
              <el-button type="text" v-else @click="jinyong(row)">
                禁用
              </el-button>

              <el-button type="text" @click="del(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align:center">
          <el-pagination
            @size-change="pageSize"
            @current-change="currentPage"
            :current-page="page.page"
            :page-sizes="[1, 5, 10, 100, 200, 300, 400]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <Add ref="Dialog" @getDate="getDate"></Add>
  </div>
</template>

<script>
import {
  questionList,
  questionRemove,
  questionStatus
} from '../../api/question'
export default {
  components: {
    Add: () => import('./components/add.vue')
  },
  data () {
    return {
      form: {
        title: '',
        subject: '',
        enterprise: '',
        type: '',
        step: '',
        username: '',
        status: '',
        difficulty: '',
        create_date: '',
        page: '1',
        limit: '1'
      },
      questionList: [],
      page: {
        pageSize: 5,
        total: 10,
        page: 1
      }
    }
  },
  methods: {
    // 点击搜索按钮
    async seach () {
      const res = await questionList(this.form)
      this.questionList = res.data.data.items
    },
    // 打开编辑弹框
    edit (row) {
      this.$refs.Dialog.isShow = true
      this.$refs.Dialog.mode = 'edit'
      this.$refs.Dialog.form = row
      console.log(row)
    },

    // 打开新增dialog弹框
    add () {
      this.$refs.Dialog.isShow = true
      this.$refs.Dialog.mode = 'add'
    },
    // 删除按钮
    del (row) {
      this.$confirm('确定删除词条题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await questionRemove({ id: row.id })
          this.getDate()
          console.log(row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    async getDate () {
      const res = await questionList({
        page: this.page.page,
        limit: this.page.pageSize
      })
      console.log(res)
      this.page.total = res.data.data.pagination.total
      const filter = res.data.data.items
      filter.forEach(v => {
        if (v.step === 1) {
          v.step = `${v.subject_name}.初级`
        } else if (v.step === 2) {
          v.step = `${v.subject_name}.中级`
        } else if (v.step === 3) {
          v.step = `${v.subject_name}.高级`
        }
        if (v.type === 1) {
          v.type = '单选'
        } else if (v.type === 2) {
          v.type = '多选'
        } else if (v.type === 3) {
          v.type = '简答'
        }
        if (v.status) {
          v.status = '启用'
        } else {
          v.status = '禁用'
        }
      })
      this.questionList = filter
      console.log('filter', filter)
    },
    pageSize (size) {
      this.page.pageSize = size
      this.form.limit = size
      this.getDate()
    },
    currentPage (page) {
      this.page.page = page
      this.form.page = page
      this.getDate()
    },

    async qiyong (row) {
      await questionStatus({ id: row.id })
      this.$message.success('状态修改成功')
      this.getDate()
    },
    async jinyong (row) {
      await questionStatus({ id: row.id })
      this.$message.success('状态修改成功')
      this.getDate()
    }
  },
  created () {
    this.getDate()
  }
}
</script>

<style lang="less" scopen>
.question {
  .TOP {
    .time {
      font-size: 14px;
      position: absolute;
      top: 173px;
      left: 1206px;
    }
  }
  .botton {
    .red {
      color: red;
    }
  }
  .el-dialog__header {
    background: linear-gradient(#01c3fa, #1197fa);
  }
}
</style>
